<template lang="pug">
  div.myTable
    div.el-card.mySearch(v-if="mySeach&&mySeach.length>0")
      el-form(:inline="true" :model="formInline"  )
        el-form-item(:label="item.label" v-for="(item,index) in mySeach" :key="index")
          el-date-picker(v-model="formInline[item.prop]" type="date" v-if="item.type==='date'" :clearable="typeof item.clearable ==='undefined'?true:item.clearable"
            :placeholder="item.placeholder" :picker-options ="pickerOptions" :value-format="item.valueFormat?item.valueFormat:'yyyy-MM-dd'" )
          el-select( v-model="formInline[item.prop]" clearable :placeholder="item.placeholder"  v-if="item.type==='select'" filterable )
            el-option(v-for="(itemData,itemIndex) in item.data" :key="itemIndex" :label="itemData.name" :value="itemData.id" )
          el-input(v-model="formInline[item.prop]" clearable :placeholder="item.placeholder"  v-if="item.type==='input'")
        el-form-item
          el-button(type="primary" @click="onSubmit") 查询
    div.el-card.myBody(:style="{'height': mySeach&&mySeach.length>0?'calc(100% - 100px)':'100%'}")
     div.tableBtn(v-if="myButtons&&myButtons.length>0" :style="{'justify-content': tableBtnStyle}")
       el-button(@click="btn.click(searchData)" v-for="(btn,btnIndex) in myButtons" :key="btnIndex" :type="btn.type?btn.type:'success'" size="small" :plain="btn.plain") {{btn.label}}
     el-table.myCenter(:data="myTableData" header-row-class-name="myCenterHeader"
       v-loading="myLoading" :style="{'height':myButtons&&myButtons.length>0?(pagination?'calc(100% - 50px - 50px)':'calc(100% - 50px)'):pagination?'calc(100% - 50px)':'100%'}" )
      el-table-column(:prop="fruit.prop" :label="fruit.label" v-for="(fruit,index) in tableHeader" :key="index" align="center")
       template(slot-scope="scope")
        span(v-if="typeof fruit.type !=='undefined'&&fruit.type === 'select'" ) {{fruit.data[scope.row[fruit.prop]]}}
        span(v-else-if="typeof fruit.type !=='undefined'&&fruit.type === 'data'" ) {{fruit.data && fruit.data.filter(dItem=>dItem.id===scope.row[fruit.prop]).length>0?fruit.data.filter(dItem=>dItem.id===scope.row[fruit.prop])[0].name:scope.row[fruit.prop]}}
        el-rate(v-else-if="typeof fruit.type !=='undefined'&&fruit.type === 'rate'" disabled show-score  text-color="#ff9900"
          :value="scope.row[fruit.prop]?Number(scope.row[fruit.prop]):0" )
        span(v-else) {{scope.row[fruit.prop]}}
      el-table-column(label="操作" v-if="myTableButtons&&myTableButtons.length>0" align="center")
        template(slot-scope="scope")
          //el-button(@click="btn.click(scope)" v-for="(btn,btnIndex) in myTableButtons" type="text" size="small") {{btn.label}}
          span(v-for="(btn,btnIndex) in myTableButtons" :key="btnIndex" style="padding:0 5px;")
           el-popconfirm( title="您确认要删除该项?"  @confirm="() => btn.click(scope,searchData)" @onConfirm="() => btn.click(scope,searchData)" v-if="btn.label === '删除'" )
            el-link(slot="reference" type="danger") 删除
           el-link( @click="btn.click(scope,searchData)" :type="btn.type?btn.type:(btn.label==='详情'?'warning':'primary')" v-else) {{btn.label}}
     el-pagination.myPage(@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" v-if="pagination"
                        :current-page="page"  :page-sizes="pageSizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper")

</template>
<script>
import request from '@/utils/request'
import { getToken } from '@/utils/auth'
import Vue from "vue";

export default {
  name: 'MyTable',
  props: {
    pagination: {
      type: Boolean,
      default: true
    },
    mySeach: {
      type: Array,
      default: () => [
        {
          label: '日期',
          type: 'date',
          placeholder: '选择日期',
          prop: 'date'
        },
        {
          label: '班级',
          type: 'select',
          data: [
            {
              label: '全部',
              value: 0
            },
            {
              label: '班级1',
              value: 1
            }
          ],
          prop: 'class'
        }
      ]
    },
    pageSizes: {
      type: Array,
      default: () => [10, 50, 100, 200, 300, 400]
    },
    tableHeader: {
      type: Array,
      default: () => [
        {
          label: '王小虎',
          prop: 'name'
        },
        {
          label: '日期',
          prop: 'date'
        }
      ]
    },
    myTableButtons: {
      type: Array,
      default: () => [
        {
          label: '详情',
          click: (data) => { console.log('data', data) }
        }
      ]
    },
    myButtons: {
      type: Array,
      default: () => [
        {
          label: '导出',
          click: (data) => { console.log('data', data) }
        }
      ]
    },
    tableBtnStyle: {
      type: String,
      default: 'flex-start'
    },
    seachUrl: {
      type: String,
      default: ''
    },
    seachMenth: {
      type: String,
      default: 'POST'
    },
    otherForm: {
      type: Object,
      default: () => {}
    },
    otherTable: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      ticket: getToken(),
      myLoading: true,
      formInline: {},
      page: 1,
      size: this.pageSizes[0],
      total: 0,
      pickerOptions: {
        disabledDate (time) {
          return false
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      myTableData: this.otherTable
    }
  },
  computed: {
    searchData () {
      return {
        ticket: this.ticket,
        pageNum: this.page - 1,
        pageSize: this.size,
        ...this.formInline,
        ...this.otherForm
      }
    }
  },
  created () {
    console.log('this.mySeach', this.mySeach)
    this.mySeach.forEach(item => {
      if (item.value) {
        Vue.set(this.formInline, item.prop, item.value)
      }
    })
    console.log('this.formInline', this.formInline)
  },
  mounted () {
    this.onSubmit()
    setTimeout(() => {
      const height = document.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight
      document.getElementsByClassName('el-table__body-wrapper')[0].style.height = 'calc(100% - ' + height + 'px)'
    }, 10)
  },
  methods: {
    handleSizeChange (val) {
      this.size = val
      this.onSubmit()
    },
    handleCurrentChange (val) {
      this.page = val
      this.onSubmit()
    },
    setMyTableData (data) {
      this.myLoading = true
      this.myTableData = data
      this.myLoading = false
    },
    getMyTableSearch () {
      return this.searchData
    },
    onSubmit () {
      this.myLoading = true
      console.log('搜索==>', this.searchData)
      if (this.seachUrl) {
        request({
          url: this.seachUrl,
          method: this.seachMenth,
          params: this.searchData
        }).then(res => {
          this.myTableData = []
          console.log('res.data', res)
          this.myTableData = res.content
          this.total = res.totalElements
          this.myLoading = false
        }).catch(e => {
          this.myLoading = false
        })
      } else {
        this.myTableData = []
        this.myLoading = false
      }
    }
  }
}
</script>
<style scoped lang="scss">
.myTable{
  height: 100%;
  width: 100%;
  .mySearch{
    margin: 10px 0 ;
    padding: 10px 10px;
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    ::v-deep .el-form-item{
      margin-bottom: 0;
    }
  }
  .myBody{
    padding: 10px 10px;
    width: 100%;
    .tableBtn{
      height: 50px;
      padding: 10px;
      display: flex;
      align-items: center;
    }
    .myCenter{
      width: 100%;
      ::v-deep .myCenterHeader{
        background-color: #F4F5FB;
        font-weight: 500;
        font-size: 15px;
        color: #000000;
        th{
          background-color: #F4F5FB;
        }
      }
      ::v-deep .el-table__body-wrapper{
        height: calc(100% - 40px);
        overflow-y: auto;
      }
    }
    .myPage{
      padding: 10px 10px;
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
